import { listConfigBase,  updateConfigBase,getOne } from "@/api/system/config/configBase";
import { listConfigTheme} from "@/api/system/config/configTheme";

import {getToken} from '@/utils/auth'
export default {
  name: 'ConfigBase',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 平台基本配置表格数据
      configBaseList: [],
      // 弹出层标题
      title: "",
      //弹出层标题图标
      dialogIcon:'',
      operationType: 1,  //操作类型，1=新增，2=编辑，3=详情
      tableHeight: 450,
      pageList: [100,200,500,1000],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        sort: undefined,
        order: undefined,
        loginTitle: undefined,
        loginLogo: undefined,
        loginBg: undefined,
        menuBarLogo: undefined,
        menuBarTitle: undefined,
        menuNum: undefined,
        themeId: undefined,
        params:{
        }
      },
      // 表单参数
      form: {
        configTheme:{}
      },
      // 表单校验
      rules: {
      },
      //true查看 false：编辑
      readOnly: true,
      columnLabel: '',
      headers: {Authorization: 'Bearer ' + getToken()},
      pic_loading: false,
      isImage: false,
      dialogImageUrl: '',
      uploadUrl: '/common/upload',
      themeList:[],
      // 主题弹框
      themeOpen: false,
      themeDialogIcon:'',
      themeTitle:'',
      themeForm:{},
      themeOnly:false,
      themeType:1,

      editOpen:false,
      editType:'',
    };
  },
  watch:{

  },
  created() {
    this.getConfigInfo();
    this.getlistConfigTheme();
  },
  methods: {
    getConfigInfo(){
      getOne({}).then(response => {
        this.form=response.data;
        this.dialogImageUrl = this.form.menuBarLogo

        if (this.form.configId) {
          this.isImage = true
        }
      })
    },
    getlistConfigTheme(){
      listConfigTheme({disableFlag:"0"}).then(response => {
        console.log(response)
        this.themeList=response.rows;
      })
    },
    /** 查询平台基本配置列表 */
    getList() {
      this.loading = true;

      listConfigBase(this.queryParams).then(response => {
        this.configBaseList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.editOpen=false;
    },
    //保存
    handleSave(){
      this.$refs["form"].validate(valid => {
          if (valid) {
            updateConfigBase(this.form).then(response => {
              this.$store.dispatch("getConfigInfo");

              this.$modal.msgSuccess("修改成功！");
              this.editOpen=false;
            });
          }
      })
    },


    openDialog(){
      //$('.configBase-body').parent().css('height', $(window).innerHeight() - 100).css('top', 0).css('overflow-y', 'auto');
    },

    changeTheme(themeId,name){
      this.form.themeId=themeId;
      this.form.configTheme.name=name;
    },
    getFile(file) {
      // if(file.success){
      const isJPG = file.raw.type === 'image/jpeg';
      const isPNG = file.raw.type === 'image/png';
      const isLt5M = file.raw.size / 1024 / 1024 < 5;
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是JPG或者PNG格式!');
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }
      if ((isJPG || isPNG) && isLt5M) {
        this.getBase64(file.raw).then(res => {
          this.form.menuBarLogo = res
          this.dialogImageUrl = res;
        });
      }

    },
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    editData(type){
      this.editType=type;
      this.editOpen=true
    }

  },
  mounted() {
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight * this.getRatio() - 102;
    });
  }
};
